{% with previous_page=url_for('webui.agent_list'), title=agent.display_name %}
{% include "header.html" %}
{% endwith %}

<div class="container"> 
<section id="main_content">
    
    <div id="terminal">
    </div>
	
	<div style="width:80%;height:40px;">
		<div id="msg-term-update">
		&#8595; Terminal updated &#8595;
		</div>
	</div>
    
	<div >
		<input type="text" name="cmd" id="cmd" style="width: 80%" placeholder="Type command here and press Enter..."/>
	</div>
	
    <script>
	(function(){
	
		// list of the last commands
		var commandHistory = [];
		
		// max number of remembered commands
		var COMMAND_HISTORY_MAX_SIZE = 100;
		
		// index of the command displayed in the input field
		var currentHistoryIndex = -1;
		
		// the hash of the current console output
		var currentMd5Hash = $.md5("");
	
		/**
		 * Add an entry in the command history, if the max size is reached, the oldest commands is removed.
		 * @param cmd the command line to add the list.
		 */
		function addComandToHistory(cmd){
			commandHistory.push(cmd);
			
			if(commandHistory.length > COMMAND_HISTORY_MAX_SIZE){
				commandHistory.splice(0, 1);
			}
			
			currentHistoryIndex = commandHistory.length;
		}
		/**
		 * listening keypress on command prompt field.
		 */
		$('#cmd').keypress(function(e){
			onCommandKeypressedAction(e);
		});

		/**
		 * While focusing the command field, handle actions when pressing the ENTER, KEY_UP or KEY_DOWN button.
		 * Send the command to the server when pressing ENTER.
		 * Navigate through the cmd history when pressing the KEY_UP or KEY_DOWN button.
		 * @param e the current event.
		 */
		function onCommandKeypressedAction(e){
			var displayValue = '';
			
			if(e.keyCode === 13){ // ENTER
				sendCommand();				
			}else if(e.keyCode == 38){ // KEY_UP
				if(currentHistoryIndex > 0){
					currentHistoryIndex--;
					$('#cmd').val(commandHistory[currentHistoryIndex]);
				}				
			}else if(e.keyCode == 40){ // KEY_DOWN
				if(currentHistoryIndex < commandHistory.length){
					currentHistoryIndex++;
					displayValue = (currentHistoryIndex == commandHistory.length)? '': commandHistory[currentHistoryIndex];
					$('#cmd').val(commandHistory[currentHistoryIndex]);
				}	
			}
			
			return false;
		}
		
		/**
		 * Send the command in the command field to the server and add it in the command history.
		 */
		function sendCommand() {
			$.post("{{ url_for('api.push_command', agent_id=agent.id) }}", 
					{'cmdline': $('#cmd').val()}, function(){});
					
			addComandToHistory($('#cmd').val());
			$('#cmd').val('');
			return false;
		}
		
		/**
		 * send the command when clicking on the send bouton.
		 */
		$('#send-btn').click(function(){
			sendCommand();
		});
		
		/**
		  * Refresh the terminal if the console output changed.
		  */
		function refreshTerminal() {

			$.get("{{ url_for('api.agent_console', agent_id=agent.id) }}", function(data) {
				var oldScrollPosition, newScrollPosition;
				var scrollToBottom = true;
				var currentHtmlHash = $.md5(data);
					
				if(currentMd5Hash != currentHtmlHash){
					currentMd5Hash = currentHtmlHash; // keep the hash in global scope to compare it at the next iteration
					oldScrollPosition = $('#termtext').scrollTop();
					scrollToBottom = (typeof oldScrollPosition == "undefined" || (oldScrollPosition + $('#termtext').innerHeight() >= $('#termtext')[0].scrollHeight)) ? true: false;
					$('#terminal').html(data);
					newScrollPosition = (scrollToBottom == true)? $('#termtext').prop('scrollHeight') : oldScrollPosition;
					$('#termtext').scrollTop(newScrollPosition);
					
					if(typeof oldScrollPosition != "undefined" && scrollToBottom == false){
						$('#msg-term-update').show();
					}else{
						$('#msg-term-update').hide();
					}
					terminalScrollAction();
					
				}
			});
		}
		
		/**
		 * Scroll the terminal to the bottom when clicking "Terminal updated" message and hide it.
		 */
		$('#msg-term-update').click(function(){
			$('#termtext').scrollTop($('#termtext').prop('scrollHeight'));
			$(this).hide();
		});
		
		/**
		 * Hide the message "Terminal updated" when the scrollbar reaches the bottom.
		 */
		 function terminalScrollAction(){
			$('#termtext').on('scroll', function() {
			   if($('#termtext').scrollTop() + $('#termtext').innerHeight() >= $('#termtext')[0].scrollHeight) {
					$('#msg-term-update').hide();
			   }
			});
		}
		
		/**
		 * Call the refresh terminal fonction twice each second.
		 */
		$(document).ready(function(){
			setInterval(refreshTerminal, 500);
		});
	})();

    </script>

</section>
</div>

{% include "footer.html" %}
